<template>
	<!-- 订单详情 -->
	<view class="page" v-if="detailData.template.files.length">
		<view class="order-content">
			<view class="info-box">
				<view class="label">{{ detailData.template.name }}</view>
				<view class="template" style="margin-bottom: 0;">
					<up-scroll-list :indicator="false" style="padding-bottom: 0;">
						<view v-for="(item, index) in images" :key="index">
							<image :src="item.url+'?style=imageMogr2/thumbnail/400x'" mode="heightFix" style="width: 254rpx; height: 338rpx;"></image>
						</view>
						<video v-if="detailData.info.type != 0" :src="detailData.template.movieUrl" class="video" object-fit="fill" :poster="detailData.template.movieThumbnailUrl+'?style=imageMogr2/thumbnail/1200x'"></video>
					</up-scroll-list>
				</view>
			</view>
			<view class="info-box">
				<view class="label" style="margin-bottom: 0;">使用形象</view>
				<view class="template">
					<view class="template-icon">
						<image :src="detailData.info.frontUrl+'?style=imageMogr2/thumbnail/400x'" mode="aspectFit"
							style="width: 162rpx; height: 216rpx; border-radius: 16rpx;" />
					</view>
				</view>
				<view class="coupon-section">
					<view class="coupon-text">体型</view>
					<view class="coupon-value">{{ tixingText }}</view>
				</view>
				<view class="product-info">
					<view class="product-title">订单金额</view>
					<view class="price">¥{{ detailData.info.photo.price / 100 }}</view>
				</view>
				<view class="coupon-section">
					<view class="coupon-text">优惠券</view>
					<view class="coupon-value">{{ couponText }}</view>
				</view>
				<view class="total-section">
					<view class="total-text">合计</view>
					<view class="total-price">¥{{ detailData.info.payPrice / 100 }}</view>
				</view>
			</view>
		</view>
		<!-- 订单时间 -->
		<view class="time-box">
			<view class="time">订单号：{{ detailData.info.uuid }}</view>
			<view class="time" v-if="detailData.info.createDate">下单时间：{{ timeFormat(new Date(detailData.info.createDate).getTime(), 'yyyy-mm-dd hh:MM:ss') }}</view>
			<view class="time" v-if="detailData.info.payDate">付款时间：{{ timeFormat(new Date(detailData.info.payDate).getTime(), 'yyyy-mm-dd hh:MM:ss') }}</view>
			<view class="time" v-if="detailData.info.finishDate">完成时间：{{ timeFormat(new Date(detailData.info.finishDate).getTime(), 'yyyy-mm-dd hh:MM:ss') }}</view>
		</view>
		<view class="bottom-bar">
			<button class="btn" @click="getOrderData" v-if="[1,2].includes(detailData.info.status)">AI全力工作中...</button>
			<button class="btn" @click="handleSubmit" v-if="detailData.info.status === 3">查看</button>
			<button class="btn" @click="remark(detailData.info)" v-if="detailData.info.status === 4">重新制作</button>
			<button class="btn refund-btn" v-if="detailData.info.status === 5">已退款</button>
			<button class="btn btn-goon" v-if="[1,2].includes(detailData.info.status) || detailData.info.status === 5" @click="gotoFilter">继续创作</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue';

	import {
		onLoad,
		onShow,
		onHide,
		onUnload
	} from '@dcloudio/uni-app'

	import {
		timeFormat
	} from '@/uni_modules/uview-plus';
	onLoad((option) => {
		detailData.info.uuid = option.uuid
		getDictCatType()
	})

	onShow(() => {
		getOrderData()
	})
	onHide(() => {
		clearInterval(timer.value)
	})
	onUnload(() => {
		clearInterval(timer.value)
	})
	const detailData = reactive({
		categorys: [],
		info: {
			photo: {},
			status: 0
		},
		template: {
			files: []
		}
	})

	// 获取套系详情
	function getTemlateData(templateId) {
		const token = uni.getStorageSync('token')
		uni.request({
			url: `${getApp().globalData.baseUrl}/prod-api/system/photos/${templateId}`,
			method: 'GET',
			header: {
				'Authorization': "Bearer " + token,
			},
			success: (res) => {
				if (res.data.code === 200) {
					detailData.template = res.data.data
				} else {
					uni.showToast({
						icon: 'none',
						title: '系统开小差了'
					})
				}
			},
			fail: (error) => {
				uni.showToast({
					icon: 'none',
					title: '系统开小差了'
				})
			}
		});
	}

	// 优惠券
	const couponText = computed(() => {
		let result = '暂无'
		if (detailData.info.coupon) {
			const {
				type,
				subMoney
			} = detailData.info.coupon
			let unit = '元'
			if (type === 2) {
				unit = '折'
				result = `${subMoney}${unit}`
			} else {
				result = `-${subMoney}${unit}`
			}
		}
		return result
	})

	const tixingText = computed(() => {
		const arr = ['标准体型', '更加丰满']
		return arr[tixing.value]
	})
	
	const images = computed(() => {
		const { files } = detailData.template
		const { type, taskId } = detailData.info
		let arr
		switch (type){
			case '0':
				arr = files
				break;
			case '1':
				const iuuid = taskId && JSON.parse(taskId).files ? JSON.parse(taskId).files[0].uuid : null
				if (files.length) {
					const list = files.filter(file => file.uuid == iuuid)
					arr = list
				}
			case '2':
				const suuid = taskId && JSON.parse(taskId).files ? JSON.parse(taskId).files[0].uuid : null
				arr = [{ url: `${getApp().globalData.baseUrl}/prod-api/files/down/${suuid}`}]
				break;
			default:
				arr = []
				break;
		}
		return arr
	})
	// 获取订单详情
	let timer = ref(null)
	function getOrderData() {
		const token = uni.getStorageSync('token')
		uni.request({
			url: `${getApp().globalData.baseUrl}/prod-api/system/pays/${detailData.info.uuid}`,
			method: 'GET',
			header: {
				'Authorization': "Bearer " + token,
			},
			success: (res) => {
				if (res.data.code === 200) {
					detailData.info = res.data.data
					if (detailData.info.status === 2 || detailData.info.status === 1) {
						// 制作中，10s刷新一次页面
						if (timer.value) {
							clearInterval(timer.value)
						}
						timer.value = setInterval(() => {
							getOrderData()
						}, 10000)
					} else {
						// 制作中，10s刷新一次页面
						if (timer.value) {
							clearInterval(timer.value)
						}
					}
					if (detailData.info.status === 4) {
						// 制作失败
						setTimeout(() => {
							uni.showToast({
								icon: 'none',
								title: '图片生成失败，请确认您上传的图片是规范的人脸图片'
							})
						}, 500)
					}
					if (!detailData.template.files.length) {
						getTemlateData(res.data.data.photo.uuid)
					}
					tixing.value = Number(res.data.data.shape)
				} else {
					uni.showToast({
						icon: 'none',
						title: '系统开小差了'
					})
				}
			},
			fail: (error) => {
				uni.showToast({
					icon: 'none',
					title: '系统开小差了'
				})
			}
		});
	}


	// 获取套系分类
	function getDictCatType() {
		uni.request({
			url: `${getApp().globalData.baseUrl}/prod-api/system/dict/data/list`,
			data: {
				dictType: 'template_cat_type',
				pageNum: 1,
				pageSize: 9999
			},
			method: 'GET',
			success: (res) => {
				if (res.data.code === 200) {
					detailData.categorys = res.data.rows
				}
			},
			fail: (error) => {
				console.log(error);
			}
		});
	}

	// 获取套系分类名称
	function getCatTypeName(value) {
		const arr = detailData.categorys.filter(category => category.dictValue === value)
		return arr.length ? arr[0].dictLabel : ''
	}

	// 体型相关
	const tixing = ref(0)
	const tixingData = reactive([{
			url: `${getApp().globalData.imgUrl}/prod-api/files/down/1935907506884620288`,
			name: '想要标准体型',
		},
		{
			url: `${getApp().globalData.imgUrl}/prod-api/files/down/1935907586509287424`,
			name: '希望更加丰满'
		}
	])

	const handleSubmit = () => {
		uni.navigateTo({
			url: `/pages/photo/photo?uuid=${detailData.info.uuid}`
		})
	};
	
	// 制作失败，重新制作
	function remark(order) {
		uni.navigateTo({
			url: `/pages/upload/upload?uuid=${order.photoId}&orderId=${order.uuid}`
		})
	}
	
	// 继续创作
	function gotoFilter() {
		uni.navigateTo({
			url: '/pages/filter/filter'
		})
	}
</script>

<style lang="scss" scoped>
	.order-content {
		background-color: #ffffff;
		padding: 30rpx 30rpx 15rpx;
	}

	.label {
		font-family: PingFang SC;
		font-weight: 600;
		font-style: Heavy;
		font-size: 28rpx;
		leading-trim: NONE;
		line-height: 40rpx;
		letter-spacing: 0%;
		color: #333333;
		margin-bottom: 24rpx;
	}

	.time-box {
		padding: 0 40rpx;
		.time {
			font-family: PingFang SC;
			font-weight: 400;
			font-style: Medium;
			font-size: 24rpx;
			leading-trim: NONE;
			line-height: 34rpx;
			letter-spacing: 0%;
			color: #7F7F7F;
			margin-bottom: 5rpx;
		}
	}

	.info-box {
		background: #FEF8F6;
		padding: 24rpx;
		border-radius: 20rpx;
		margin-bottom: 24rpx;

		.template {
			overflow: hidden;
			.video {
				width: 254rpx;
				height: 338rpx;
			}

			.template-icon {
				width: 162rpx;
				height: 216rpx;
				border-radius: 12rpx;
				overflow: hidden;
				margin: 0 auto;
			}

			.template-name {
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
				line-height: 140rpx;
			}
		}
	}

	.product-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;
	}

	.product-title {
		font-size: 28rpx;
		color: #333333;
	}

	.price {
		font-size: 28rpx;
		color: #333333;
	}

	.coupon-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;
	}

	.coupon-text {
		font-size: 28rpx;
		color: #333333;
	}

	.coupon-value {
		font-size: 28rpx;
		color: #333333;
	}

	.total-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.total-text {
		font-size: 28rpx;
		color: #333333;
	}

	.total-price {
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
	}

	.preview-images {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.preview-image {
		width: 288rpx;
		height: 378rpx;
		border-radius: 12rpx;
		border: 3px solid #ffffff;
		transition: all 0.5s;
		display: block;
		margin: 0 auto 10rpx;
	}

	.active {
		.preview-image {
			border-color: #FEC207;
		}

		.tixing {
			color: #FEC207;
		}
	}

	.tixing {
		text-align: center;
		color: #333333;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.preview-tip {
		font-size: 28rpx;
		color: #666666;
		text-align: center;
	}

	.bottom-bar {
		position: fixed;
		bottom: 30rpx;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		height: 80rpx;
		padding-bottom: env(safe-area-inset-bottom);
		.btn {
			color: #ffffff;
			font-family: PingFang SC;
			font-weight: 500;
			font-style: Heavy;
			font-size: 36rpx;
			leading-trim: NONE;
			line-height: 100rpx;
			letter-spacing: 10%;
			border-radius: 28rpx;
			background: linear-gradient(90deg, #D19973 0%, #EBBD9D 100%);
			width: 422rpx;
			height: 100rpx;
			&.refund-btn {
				background: #AEAEAE;
			}
		}
		.btn-goon {
			background: #2bcf7d;
		}
	}

	.payment-amount {
		font-size: 28rpx;
		color: #333333;
	}

	.amount {
		color: #D19973;
		font-weight: 500;
	}

	.submit-btn {
		width: 100%;
		line-height: 80rpx;
		background-color: #D19973;
		color: #ffffff;
		font-size: 28rpx;
		border-radius: 40rpx;
	}
</style>